<template>
  <div class="w-full h-[64px] flex justify-between items-center pr-10">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3 title">资产编辑</span>
      </div>
    </div>
    <div class="flex-1">
      <a-row>
        <a-col :span="18">
          <a-steps :current="1">
            <a-step class="step-title">资源包基础信息</a-step>
            <a-step class="step-title">选择资源</a-step>
          </a-steps>
        </a-col>
      </a-row>
    </div>
  </div>
  <div class="w-full max-height-[772px] px-6">
    <div class="w-full">
      <div class="search">
        <a-form
          :model="form"
          :rules="rules"
          :disabled="disabled"
          label-align="left"
          ref="formRef"
          auto-label-width
        >
          <a-row justify="center">
            <a-col :span="7">
              <div class="w-full h-[52px] leading-10 assect-title">资产包基础信息</div>
            </a-col>
          </a-row>

          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="name" label="资产包名称" label-col-flex="">
                <a-input v-model="form.name" placeholder="请输入" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="shared" label="是否共有" label-col-flex="">
                <a-select v-model="form.shared" placeholder="请选择" allow-clear>
                  <a-option
                    v-for="item in ownershipOrNot"
                    :label="item.label"
                    :key="item.value"
                    :value="item.value"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="owner_org_code" label="资产所属组织">
                <a-select
                  placeholder="请选择"
                  v-model="form.owner_org_code"
                  allow-clear
                  multiple
                  :max-tag-count="2"
                >
                  <a-option v-for="item in ownerData" :key="item.code" :value="item.code">{{
                    item.org_name
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="from" label="资产来源" label-col-flex="">
                <a-select v-model="form.from" placeholder="请选择" allow-clear>
                  <a-option
                    v-for="item in dataResourceSource"
                    :label="item"
                    :value="item"
                    :key="item"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="3"></a-col>
            <a-col :span="10">
              <div class="w-full" style="border: 1px solid #ebf0fa"></div>
            </a-col>
          </a-row>

          <a-row justify="center">
            <a-col :span="7">
              <div class="w-full h-[52px] mt-4 leading-10 assect-title">资产包详情信息</div>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="time" label="数据日期范围" :disabled="disabled" label-col-flex="">
                <a-range-picker allow-clear :style="{ width: '100%' }" v-model="form.time">
                </a-range-picker>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="business" label="应用行业" label-col-flex="">
                <a-select v-model="form.business" placeholder="请选择" allow-clear>
                  <a-option
                    v-for="item in applicationIndustry"
                    :label="item"
                    :key="item"
                    :value="item"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="update_frequency" label="更新频率" label-col-flex="">
                <a-select v-model="form.update_frequency" placeholder="请选择" allow-clear>
                  <a-option
                    v-for="item in dataUpdateFrequencyPack"
                    :label="item"
                    :key="item"
                    :value="item"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row justify="center">
            <a-col :span="7">
              <a-form-item field="scene_description" label="应用场景" label-col-flex="">
                <a-textarea
                  placeholder="描述数据应用场景"
                  v-model="form.scene_description"
                  :max-length="400"
                  allow-clear
                  show-word-limit
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="fotter flex items-center justify-between">
      <div class=""></div>
      <div class="mr-10">
        <a-space>
          <a-button @click="callBack">取消</a-button>
          <a-button type="primary" @click="handleNext" style="border-radius: 4px">下一步</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
/**
 * @method 顶部标题
 */
const titleName = computed(() => {
  return route.name;
});
/**
 * @method 表单固定数据
 */
import usepackge from '../use_hooks/usecommon';
const { ownershipOrNot, dataResourceSource, applicationIndustry, dataUpdateFrequencyPack } =
  usepackge();
/**
 * @method 返回
 */
const goBack = () => {
  window.history.go(-1);
};
/**
 * @method 表单筛选元素
 */
let form = ref({
  business: '', //应用行业
  end_time: '', //结束时间
  from: '', //资产来源
  name: '', //资产包名称
  scene_description: '', //应用场景
  shared: null, //是否共有
  owner_org_code: [], //资产所属组织
  start_time: '', //开始时间
  update_frequency: '', //更新频率
  time: [] as any
});
/**
 * @method 提交表单
 */
const formRef = ref();
/**
 * @method 表单验证
 */
import useroule from '../use_hooks/useroule';
const { rules } = useroule();
/**
 * @method 提交表单,选择下一步
 */
const handleNext = async () => {
  const action = route.name;
  console.log(action);
  switch (action) {
    case '资产打包':
      validate('资产打包');
      break;
    case '查看详情':
      router.push({ name: '选择资产', query: { ...form, action: '查看详情' } } as any);
      break;
    case '资源编辑':
      validate('资源编辑');
      break;
    case '资产更新':
      validate('资产更新');
      break;
  }
};
/**
 * @method 除去查看详情其他都需要验证
 */
const validate = async (action: string) => {
  const res = await formRef.value?.validate();
  if (res === undefined) {
    console.log('验证通过');
    const obj = route.query as unknown as DetailsType;
    router.push({
      name: '选择资产',
      query: { ...form.value, action: action, id: obj.id }
    });
  } else {
    console.log('验证不通过');
  }
};
/**
 * @method 取消
 */
const callBack = () => {
  router.go(-1)
};
import * as api from '@/api/pack/pack';
/**
 * @method 初始化获取资产所属组织
 */
interface ownerDataType {
  code: number;
  parent_code: number;
  org_name: string;
  org_type: string;
  org_logo: string;
  credit_code: string;
  concat_user: string;
  phone: string;
  concat_address: string;
  address: string;
  is_outer: number;
}
const ownerData = ref<ownerDataType[]>([]);

const getOwner = async () => {
  let obj = {
    page: 1,
    page_size: 30
  };
  const res = await api.getOwner(obj);
  ownerData.value = res.data;
};
/**
 * @method 初始化查看处于什么状态
 */
const disabled = ref(false);
/**
 * @method 资产包详情,编辑，更新
 */
import type { DetailsType } from '@/api/pack/page_type';
const getDetails = async () => {
  const obj = route.query as unknown as DetailsType;
  let res = await api.getDetails(obj.id);
  console.log(res.data);
  // 回显
  form.value = res.data;
  form.value.time = [];
  form.value.time.push(res.data.data_begin_time);
  form.value.time.push(res.data.data_end_time);
  form.value.scene_description = res.data.describe;
  form.value.owner_org_code = res.data.owner_org_code.map((itme) => itme.code);
  // form.value.resources = [];
  // res.data.resources.forEach((item) => {
  //   form.value.resources(item);
  // });
  console.log(form.value);
};

onMounted(() => {
  getOwner(); //初始化获取资产所属组织
  const action = route.query.action;
  switch (action) {
    case '资产打包':
      disabled.value = false;
      form.value = route.query as any;
      break;
    case '查看详情':
      disabled.value = true;
      getDetails();
      break;
    case '资源编辑':
      disabled.value = false;
      getDetails();
      break;
    case '资产更新':
      disabled.value = false;
      getDetails();
      break;
  }
});
</script>

<style lang="less" scoped>
// 步骤条
:deep(.arco-steps-item-title) {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  color: #465a80;
}

// 顶部标题样式
.title {
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 0em;
  color: #394d73;
}
// 资产包基础信息样式
.assect-title {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0em;

  /* 2 中性色/标题&强调(color-text-1) */
  color: #394d73;
}
// lable  样式
:deep(.arco-form-item-label) {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  color: #465a80;
}
.fotter {
  height: 64px;
  // border: 1px solid #000;
  position: fixed;
  left: 220px;
  bottom: 0px;
  width: calc(100vw - 220px);
  color: white;
  text-align: center;
  padding: 10px;
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
}
:deep(.arco-textarea) {
  height: 200px;
  width: 100%;
}
</style>
